/* eslint-disable react/jsx-no-duplicate-props */
import React, {Component} from 'react'
import {connect} from 'react-redux';
import {Button, Form} from 'antd';
import {ProFormRadio, ProFormText, ProFormUploadButton} from '@ant-design/pro-form';
import {removeEmptyField} from '../../compoent/emptyFild'

class Add extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            visible: false,
            type: '',
            loading: false,
            h5: true

        };
    }

    componentDidMount() {
        const {record} = this.props
        if (record)
            this.setState({h5: record.category !== '2'})
    }

    onFinish = (values) => {
        const {type, img} = this.props
        values.upload = '';
        values.imageUrl = img;
        let params = removeEmptyField(values);
        if (type === '0') {
            if (params) {
                this.props.add(params).then(res => {
                    this.props.list()
                })
            }
        }
        else if (type === '1') {
            //编辑接口
            if (params) {

                params.id = this.props.record.id
                this.props.upd(params).then(res => {
                    this.props.list()
                })
            }

        }
        this.props.handleCancel()

    };

    onFinishFailed = (errorInfo) => {

    };
    onChangeType = (e) => {
        let h5 = e.target.value !== '2'
        this.setState({h5: h5})
    };

    render() {
        // this.setState({h5:true })
        const {record, upload} = this.props
        const {loading, h5} = this.state;

        return (
            <div>
                <Form name="basic"
                      labelCol={{span: 6}}
                      wrapperCol={{span: 14}}
                      initialValues={{remember: true}}
                      onFinish={this.onFinish}
                      onFinishFailed={this.onFinishFailed}
                      autoComplete="off"
                      initialValues={{
                          title: record ? record.title : '',
                          actionPath: record ? record.actionPath : '',
                          action: record ? record.action : '',
                          htmlUrl: record ? record.htmlUrl : '',
                          category: record && record.category === '2' ? '2' : '1'
                      }}>

                    <ProFormText rules={[
                        {
                            required: true,
                            message: '请输入标题!',
                        },
                    ]} width="md" name="title" label="标题" placeholder="标题 "/>

                    <ProFormRadio.Group
                        name="category"
                        label="类型"
                        options={[{label: 'h5', value: '1',}, {label: 'app', value: '2',}]}
                        onChange={this.onChangeType}
                    />
                    {h5 ? <ProFormText tooltip="H5地址" width="md" name="htmlUrl" label="h5地址"
                                       placeholder="跳转地址"
                                       rules={[
                                           {
                                               required: h5,
                                               message: '请输入h5地址!',
                                           },
                                       ]}
                    /> : <>
                        <ProFormText tooltip="android app 跳转路径" width="md" name="action" label="android路径"
                                     placeholder="android app跳转路径"
                                     rules={[
                                         {
                                             required: !h5,
                                             message: 'android app 跳转路径!',
                                         },
                                     ]}
                        />

                        <ProFormText tooltip="ios app 跳转路径" width="md" name="actionPath" label="ios路径"
                                     placeholder="ios app 跳转路径"
                                     rules={[
                                         {
                                             required: !h5,
                                             message: '请输入ios路径!',
                                         }
                                     ]}
                        />
                    </>}


                    <ProFormUploadButton
                        max={1} tooltip="限制1张图片 app轮播图片 注意尺寸" width="md" name="upload" label="图片"
                        placeholder="图片"
                        fieldProps={{
                            name: 'file',
                            beforeUpload: async (file) => {
                                this.setState({loading: true})
                                upload({file: file, type: 'image'}).then(r => {
                                    if (r.code === 200)
                                        this.setState({loading: false})
                                })


                                return false
                            }
                        }}
                    />


                    <Form.Item wrapperCol={{offset: 8, span: 16}}>
                        <Button type="success" htmlType="reset">
                            重置
                        </Button>
                        <Button loading={loading} type="primary" htmlType="submit" style={{marginLeft: 30}}>
                            提交
                        </Button>

                    </Form.Item>
                </Form>
            </div>
        )


    }


}

const mapState = state => ({
    ...state.banner

});

const mapDispatch = dispatch => ({
    ...dispatch.banner
})

export default connect(mapState, mapDispatch)(Add);